<template>
  <div class="user">
    <div class="head-img">
      <img
        src="https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/640 4.jpg"
        alt="" />
      <img
        class="img"
        src="https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/640 4.jpg"
        alt="" />
      <div class="name">张三</div>
    </div>

    <geekList
      :params="params"
      request-name="getBrokeNewsList"
      folder-name="explosive"
      @getData="getData">
      <waterfall
        :list="list"
        :gutter="0"
        :breakpoints="{ 800: { rowPerView: 2 }, 500: { rowPerView: 2 } }">
        <template #item="{ item }">
          <div
            class="box"
            @click="router.push('/works-details')">
            <div class="icon geek-icon">&#xe622;</div>
            <lazy-img :url="item.url" />
            <div class="head">
              <div class="left">
                <img
                  :src="item.url"
                  alt="" />
                {{ item.name }}
              </div>
              <div class="right">
                <i class="geek-icon">&#xe618;</i>
                {{ item.num }}
              </div>
            </div>
          </div>
        </template>
      </waterfall>
    </geekList>
  </div>
</template>

<script setup lang="ts">
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const list = ref<any>([
  {
    url: 'https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/640 4.jpg',
    name: '张三1',
    num: 10
  },
  {
    url: 'https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/640 2_1710999275735.jpg',
    name: '张三2',
    num: 10
  },
  {
    url: 'https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/黑竹沟国家森林公园.jpg',
    name: '张三3',
    num: 10
  },
  {
    url: 'https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/640 1.jpg',
    name: '张三4',
    num: 10
  },
  {
    url: 'https://file.daqsoft.com/uploadfile/server/wl-cloud/cultural-tourism-cloud/site569221/640.jpg',
    name: '张三5',
    num: 10
  }
]);

const getData = (arr: any, currPage: number) => {
  if (currPage === 1) {
    list.value = arr;
  } else {
    list.value.push(...arr);
  }
};
</script>

<style lang="scss" scoped>
.user {
  .head-img {
    position: relative;
    img {
      width: 100%;
      height: 400px;
    }
    .img {
      position: absolute;
      left: 50px;
      bottom: -75px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
    .name {
      position: absolute;
      left: 220px;
      font-size: 30px;
      font-weight: bold;
      width: 200px;
    }
  }
  :deep(.geek-list) {
    padding: 80px 35px 0;
  }
  .waterfall-list {
    :deep(.waterfall-item) {
      .box {
        padding: 0 5px;
        position: relative;
        .icon {
          z-index: 10;
          position: absolute;
          right: 20px;
          top: 20px;
          color: #444444;
          font-size: 40px;
          background: #fff;
          border-radius: 50%;
        }
        .head {
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #000;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              object-fit: cover;
              margin-right: 10px;
            }
          }
          .right {
            font-size: 20px;
            i {
              font-size: 24px;
              color: #2b2b2b;
            }
          }
        }
      }
    }
  }
}
</style>
